/*头部*/
.top-bar{
    height:17.33vw;
    background: #fff;
    display: flex;
    align-items: center;
   justify-content: space-between;
    padding: 0 3.2vw;
    position: fixed;
    width: 100vw;
    opacity: 0.9;
    z-index:99;
}
.top-bar .top-bar-user{
    display: flex;
    align-items: center;
    color: #333;
    font-size: 0.48rem;
}
.top-bar .top-bar-user img{
    width:9.33vw;
    height:9.33vw;
    margin-right: 2.67vw;
}
.top-bar .top-bar-exit{
    display: flex;
    align-items: center;
    justify-content: center;
    width:13.33vw;
    height:5.87vw;
    border-radius: 30px;
    border:1px solid #999;
    color: #999;
    text-align: center;
    font-size: 0.38rem;
}

img.banner{
    width:93.6vw;
    margin-left: 3.2vw;
    border-radius: 4px;
    margin-top: 17.33vw;
}

.modal-option{
    width:87.2vw;
    height:26.88vw;
    margin-left: 6.4vw;
    margin-top: 3.2vw;
    display: flex;
}
.modal-option ul{
    display: inline-flex;
    flex:1;
    justify-content: space-between;
    align-items: center;
}
.modal-option ul a{
    height:22vw;
    text-align: center;
    width:18vw;
}
.modal-option ul a img{
    width:13.33vw;
    height:13.33vw;
}
.modal-option ul a span{
    display: inline-block;
    color: #333;
    font-size: 0.32rem;
    margin-top: 2vw;
}
.line{
    height:1.33vw;
    width:100vw;
    background: #f1f1f1;
}

.content{
    width:100%;
}

.content .content-commend{
    display: flex;
    align-items:center;
    color: #f71e1e;
    font-size: 0.46rem;
    margin-top: 2.66vw;
    margin-left: 3.2vw;
}
.content .content-commend:before{
    display: inline-block;
    content: '';
    width:1.06vw;
    margin-right: 2.67vw;
    height:4.27vw;
    background: #ff5555;
    border-radius: 2px;
}

.content .list ul a {
    display: block;
    overflow: hidden;
    padding: 4vw 0vw;
    position:relative;
    height:26.7vw;
    padding-left: 3.2vw;
    padding-right: 3.2vw;
}
.content .list ul a:after{
    display: inline-block;
    content: '';
    width:70.13vw;
    height:1px;
    background: #f1f1f1;
    position: absolute;
    bottom:0;
}
.content .list ul a img{
    width: 24vw;
    height: 18.7vw;
    float: left;
    margin-right: 2vw;
    border-radius: 4px;
}
.content .list ul a p{
    font-size: 0.38rem;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-top: 1.07vw;
}
.content .list ul a span{
    font-size: 0.32rem;
    color: #999;
}
.content .list ul a span:nth-child(3){
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 50%;
    position: absolute;
    bottom: 3.6vw;
    margin-left: -1.5vw;
}
.content .list ul a span:nth-child(4){
    position: absolute;
    right: 3vw;
    bottom:3.9vw;
    font-family: 'Microsoft YaHei';
}
@media screen and (device-width: 320px){
    .content .list ul a span:nth-child(3),.content .list ul a span:nth-child(4){
        bottom:4vw;
    }
}
@media screen and (device-width: 1080px){
    .content .list ul a span:nth-child(3),.content .list ul a span:nth-child(4){
        bottom:3.8vw;
        margin-left: -12px;
    }
}
/*遮罩层*/
.mask{
    display: none;
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background: #000;
    opacity: 0.56;
    z-index:99;
}
.mask-content{
    display: none;
    z-index: 99999;
    position: absolute;
}
.mask-content .mask-bg{
    width:77.6vw;
    height:42.67vw;
    position: absolute;
    top:50vw;
    left:50vw;
    margin-left: -38.8vw;
}
.mask-content .mask-warning{
    width:18.67vw;
    height:18.67vw;
    position: absolute;
    top:50vw;
    left:50vw;
    margin-top: -9.34vw;
    margin-left: -9.34vw;
}
.mask-content .mask-question{
    width:100vw;
    position: absolute;
    text-align: center;
    font-size: 0.48rem;
    color: #333;
    top:68.34vw;
}
.mask-content .mask-button-confirm,.mask-content .mask-button-cancel{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width:26.67vw;
    height:6.67vw;
    border:1.5px solid #ff5555;
    color: #ff5555;
    font-size: 0.38rem;
    border-radius: 30px;
    top:82vw;
    left:18vw;
    text-align: center;
    line-height:6.67vw;
}
.mask-content .mask-button-cancel{
    left:55vw;
}
.mask-content .mask-button-confirm{
    background: #ff5555;
    color: #fff;
}

.default{
    height:calc(100vh - 110vw);
    display: flex;
    justify-content: center;
    align-items: center;
}
.default img{
    width:16vw;
}
a:active{
    background-color:rgba(0,0,0,0.1)!important;
    color: #fff;
    /*background-image: -webkit-repeating-radial-gradient(#f00 0%,#fff 100%)!important;*/
    /*background-color: repeating-radial-gradient(blue 20%,green 50%)!important;*/
    /*-webkit-tap-highlight-color: rgba(0,0,0,0.1);*/
}



